<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title> 作业 </title>
  </head>
  <body>
  <div id="content" class="content">
    <div id="title" class="title">
      <div id="left_title" class="left_title">
        <font size="5">教育部全国高校名单（截止2020-06-30）</font>
      </div>
      <div id="righ_title" class="right_title">
        <font size="5">按高校查询 | 按地区查询</font>
      </div>
    </div>

    <div id="left_table" class="left_table" align="center">
      <br>
      <font size="3" class="l_uiniversity">+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高校类型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+</font>
      <br> <br>
      <font size="3">+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所在地区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+</font>
      <br>
    </div>

    <div class="center_content">
      <table class="center_table"  id="example-1">
        <tr>
          <th colspan="8" class="table_title"><li><font>一流大学</font></li></th>
        </tr>
        <tr>
          <th>序号</th>
          <th>学校标识码</th>
          <th>学校名称</th>
          <th>所在地区</th>
          <th>所在城市</th>
          <th>主管部门</th>
          <th>办学层次</th>
          <th>高校类型</th>
        </tr>
        <tr  v-for="item in items" :key="item.message">
          <th>{{ item.id }}</th>
          <th>{{ item.id_code }}</th>
          <th>{{ item.name }}</th>
          <th>{{ item.region }}</th>
          <th>{{ item.city }}</th>
          <th>{{ item.department }}</th>
          <th>{{ item.level }}</th>
          <th>{{ item.title }}</th>
        </tr>
      </table>

    </div>

  </div>

  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>

    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
  </script>

  <style>
    .center_table{
      border:1px solid #efefef;
      width: 100%;
      position: absolute;
    }
    .center_content tr th{
      border:1px solid #efefef;
    }

    .center_content{
      left: 25%;
      position: absolute;
      width: 50%;
      border: 2px solid #efefef;
      top: 8%;
    }

    .content{
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .left_table{
      position: absolute;
      left: 10%;
      width: 12%;
      height: 30%;
      top: 8%;
      border: 2px solid #efefef;
    }


    .title{
      position: absolute;
      top: 2%;
      width: 80%;
      left: 10%;
      height: 4%;
      background-color: #f2f8fe;
    }


    .left_title{
      position: absolute;
      left: 0%;
      width: 40%;
    }

    .right_title{
      position: absolute;
      right: 0%;
    }

  </style>

</html>
